<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right,
        .middle {
            float: left;
        }

        .left,
        .right {
            border: 1px solid #eee;
            width: 100px;
            height: 200px;
            line-height: 28px;
            text-align: center;
        }

        .active {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="left">
        <div class="active">张三</div>
        <div>李四</div>
        <div>王五</div>
        <div>赵六</div>
        <div>孙七</div>
        <div>王八</div>
    </div>
    <div class="middle">
        <input type="button" value=">" />
        <input type="button" value="<" />
    </div>
    <div class="right"></div>
    <script>
        window.onload = function () {

            // document.querySelectorAll('.left>div').forEach(function(dom){
            //     dom.onclick = function(){
            //         // 当前点击的增加active样式
            //         // 先将具备active样式的  移除样式
            //         if(document.querySelector('.left>.active')){
            //             document.querySelector('.left>.active').className = '';
            //         }
                    
            //         // 当前点击的添加
            //         this.className = 'active';
            //     }
            // })



            var names = document.querySelectorAll('.left>div');
            console.log(names);
            names.forEach(function (dom) {
                dom.onclick = function () {
                    if (document.querySelector(".left>.active")) {
                        document.querySelector('.left>.active').className = '';
                    }
                    this.className = "active"
                }
            })
            // var cli = document.querySelectorAll(".middle>input");
            // // var right = document.querySelector(".right")
            // cli[0].onclick = function () {
            //     // document.querySelector(".right").appendChild( document.querySelector(".active"))
            //     document.querySelectorAll(".right>.div").forEach(function (dom) {
            //         dom.className = '';
            //     })
            //     document.querySelector('.right').appendChild(document.querySelector('.left>.active'));
            // }
            // cli[1].onclick = function(){
            //     document.querySelector(".left").appendChild( document.querySelector(".active"))
            //     document.querySelector(".left>.active").removeAttribute("class")
            // }

            document.querySelector('input').onclick = function(){
                // 先将右侧的所有的元素移除active
                document.querySelectorAll('.right>div').forEach(function(dom){
                    dom.className = '';
                })
                // 将左侧有active的元素的移动到右侧
                document.querySelector('.right').appendChild(document.querySelector('.left>.active'));
            }
            document.querySelectorAll('input')[1].onclick = function(){
                // 先将右侧的所有的元素移除active
                document.querySelectorAll('.left>div').forEach(function(dom){
                    dom.className = '';
                })
                // 将左侧有active的元素的移动到右侧
                document.querySelector('.left').appendChild(document.querySelector('.right>.active'));
            }
        }

    </script>
</body>

</html>